<template>
  <div style="margin:10px 0 ">
    <div>
      <el-card>
        <div slot="header" style="display: flex;justify-content: space-between">
          <div style="text-align: left">
            <span>搜索操作相关设置</span>
          </div>

          <div style="text-align: right">
            <el-button size="medium" @click="addSearchObj">添加搜索目标</el-button>
          </div>
        </div>
        <div>
          <el-card v-for="(item,index) in searchObjList" style="margin: 5px 0">
            <div>
              <el-row :gutter="15">
                <el-col :span="7">
                  <el-tooltip effect="dark" content="后台账号" placement="top" placeholder="后台账号">
                    <el-input size="mini" v-model="searchObjList[index].account"></el-input>
                  </el-tooltip>
                </el-col>
                <el-col :span="7">
                  <el-tooltip effect="dark" content="后台密码" placement="top" placeholder="后台密码">
                    <el-input size="mini" v-model="searchObjList[index].password" type="password"
                              show-password></el-input>
                  </el-tooltip>
                </el-col>
                <el-col :span="6">
                  <el-tooltip effect="dark" content="类目" placement="top" placeholder="类目">
                    <el-input size="mini" v-model="searchObjList[index].searchContent"></el-input>
                  </el-tooltip>
                </el-col>
                <el-col :span="4">
                  <el-tooltip effect="dark" content="删除当前搜索目标" placement="top">
                    <el-button size="mini" type="primary" icon="el-icon-delete"
                               @click="searchObjList.splice(index,1)"></el-button>
                  </el-tooltip>
                </el-col>
              </el-row>
            </div>
            <div style="margin-top: 10px">
              <el-row :gutter="15">
                <el-col :span="16">
                  <el-tooltip effect="dark" content="关键词类型" placement="top">
                    <el-radio-group v-model="searchObjList[index].dataWord" size="mini">
                      <el-radio-button label="搜索词"></el-radio-button>
                      <el-radio-button label="主题词"></el-radio-button>
                      <el-radio-button label="长尾词"></el-radio-button>
                      <el-radio-button label="品牌词"></el-radio-button>
                      <el-radio-button label="核心词"></el-radio-button>
                      <el-radio-button label="修饰词"></el-radio-button>
                    </el-radio-group>
                  </el-tooltip>
                </el-col>
                <el-col :span="8">
                  <el-tooltip effect="dark" content="数据周期" placement="top">
                    <el-radio-group v-model="searchObjList[index].dateCycle" size="mini">
                      <el-radio-button :label=7>7天</el-radio-button>
                      <el-radio-button :label=30>30天</el-radio-button>
                    </el-radio-group>
                  </el-tooltip>
                </el-col>
              </el-row>
            </div>
          </el-card>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import {isNull} from "@/utils/service";
import msg from "@/utils/message";

export default {
  name: "industryGoodKey",
  props: {
    params: {
      type: Object,
      required: false
    }
  },
  data() {
    return {
      searchObjList: []
    }
  },
  watch: {
    'params': {
      handler(val) {
        this.initParams({...this.params})
      }
    }
  },
  created() {
    this.initParams({...this.params})
  },
  methods: {
    initParams({searchObjList = []}) {
      this.searchObjList = searchObjList
    },
    getParam() {
      let _t = this;
      let data = {
        searchObjList: _t.searchObjList,
      }
      return {...data}
    },
    checkParam() {
      let _t = this;
      let err = "[ 运营助手-获取市场关键词 ]"
      if (_t.searchObjList.length === 0) {
        msg.warning(err + "请至少添加一个搜索目标")
        return false;
      }
      for (let i = 0; i < _t.searchObjList.length; i++) {
        if (isNull(_t.searchObjList[i].account)) {
          msg.warning(err + " 第 " + (i + 1) + " 个目标 没有填写后台账号")
          return false;
        }
        if (isNull(_t.searchObjList[i].password)) {
          msg.warning(err + " 第 " + (i + 1) + " 个目标 没有填写后台密码")
          return false;
        }
        if (isNull(_t.searchObjList[i].searchContent)) {
          msg.warning(err + " 第 " + (i + 1) + " 个目标 没有填写目标品类")
          return false;
        }
      }
      return true;
    },
    addSearchObj() {
      this.searchObjList.unshift({
        account: '',
        password: '',
        searchContent: '',
        dataWord: "搜索词",
        dateCycle: 7,
      })
    }
  }
}

</script>

<style scoped>

</style>